<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';

const columns = [
  {
    title: '服务产品名称',
    key: 'productServiceName',
  },
  {
    title: '启用状态',
    key: 'enableStatus',
  },
  {
    title: '服务类型',
    key: 'serviceType',
  },
  {
    title: '图标简写',
    key: 'iconAbbreviation',
  },
  {
    title: '服务单价',
    key: 'servicePrice',
  },
  {
    title: '计价单位',
    key: 'chargeUnit',
  },
  {
    title: '任务派工类型',
    key: 'assignmentType',
  },
];

const loading = ref(true);
const activeName = ref('first');
const statusFilter = ref('全部');
const handleClick = (tab, event) => {
  console.log(tab, event);
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};

// 表格原始数据源（带serviceType标识）
const rawTableData = ref([
  { productServiceName: '服务A', enableStatus: '启用', serviceType: '代理记账报税', iconAbbreviation: '项1', servicePrice: '10000', chargeUnit: '月', assignmentType: '代帐任务' },
  { productServiceName: '服务B', enableStatus: '启用', serviceType: '代理记账报税', iconAbbreviation: '项2', servicePrice: '10500', chargeUnit: '月', assignmentType: '代帐任务' },
  { productServiceName: '服务C', enableStatus: '启用', serviceType: '人资社保', iconAbbreviation: '项1', servicePrice: '10000', chargeUnit: '月', assignmentType: '工商任务' },
  { productServiceName: '服务D', enableStatus: '启用', serviceType: '工商服务', iconAbbreviation: '项1', servicePrice: '8000', chargeUnit: '月', assignmentType: '社保任务' },
]);

// 下拉框和搜索框
const filteredTableData = computed(() => {
  return rawTableData.value.filter(item=>{
    const typeMatch = active.value === '全部类型'||item.serviceType === active.value
    const statusMatch = statusFilter.value === '全部'||item.enableStatus === statusFilter.value
    const searchMatch = !input1.value||item.productServiceName.toLowerCase().includes(input1.value.toLowerCase());
    return typeMatch&&statusMatch&&searchMatch;
   });
});

const handleStatusClear = () => {
  statusFilter.value = '全部'; // 手动强制重置为"全部"
};

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 2000);
});

// 对话框相关
const open = ref(false);
const title = ref('添加或修改');
const form = ref({
  productServiceName: '',
  enableStatus: '',
  serviceType: '',
  iconAbbreviation: '',
  servicePrice:'',
  chargeUnit:'',
  assignmentType:''
});
const handleOpen = () => {
  open.value = true;
};
const handleClose = () => {
  open.value = false;
};

// 左侧筛选逻辑
const active = ref('全部类型');
const filterTypes = [
  { label: "全部类型", value: '全部类型' },
  { label: "代理记账报税", value: '代理记账报税' },
  { label: "其它财税服务", value: '其它财税服务' },
  { label: "人资社保", value: '人资社保' },
  { label: "工商服务", value: '工商服务' },
  { label: "资质办理", value: '资质办理' },
  { label: "知识产权", value: '知识产权' }
];

// 点击筛选项的处理函数
const handleFilter = (value) => {
  active.value = value;
  console.log(`当前筛选类型：${value}`);
};

// 顶部搜索input声明
const input1 = ref('');
</script>

<template>
  <div class="page-container">
    <!-- 顶部搜索和筛选区域 -->
    <div class="top-filter">
      <div class="top-filter-left">
        <stick-popup>
          <template #show>
            <!-- <el-form :model="form" label-width="120px" class="top-filter-btn"> -->
            <div class="top-filter-btn" label-width="120px">
              <el-select v-model="statusFilter" placeholder="启用状态" @clear="handleStatusClear" clearable>
                <el-option label="全部" value="全部" />
                <el-option label="启用" value="启用" />
                <el-option label="停用" value="停用" />
              </el-select>
            </div>
            <!-- </el-form> -->
          </template>
        </stick-popup>
        <div class="top-filter-search">
          <el-input v-model="input1" placeholder="服务项目名称">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 下方内容区：左侧类型 + 右侧表格 -->
    <div class="main-container">
      <!-- 左侧类型选择区域 -->
      <div class="left-form">
        <ul>
          <li v-for="item in filterTypes" :key="item.value" @click="handleFilter(item.value)":class="{ active: active === item.value }">
            {{ item.label }}
          </li>
        </ul>
      </div>
      <!-- 右侧表格区域 -->
      <div class="table-container">
        <div class="table-area">
          <div class="table-area-table">
            <my-table 
              :loading="loading" 
              :columns="columns" 
              :dataSource="filteredTableData" 
              :showIndex="true" 
              :show-operation="false"
              :scroll="{ x: false }"
            >
              <template #operation>
                <div class="operation-buttons">
                  <a href="javascript:;" class="edit-btn" @click="handleEdit(record)">编辑</a>
                  <a href="javascript:;" class="disable-btn" @click="handleDisable(record)">停用</a>
                  <a href="javascript:;" class="delete-btn" @click="handleDelete(record)">删除</a>
                </div>
              </template>
            </my-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-container {
  width: 100%;
  height: 100vh;
  background-color: rgb(239, 239, 239);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.top-filter {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.top-filter-left {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  .top-filter-btn {
    width: 140px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    user-select: none;
  }
  .top-filter-search {
    width: 200px;
  }
}
.main-container {
  display: flex;
  gap: 0;
  flex: 1;
  padding-top: 10px;
  overflow: hidden;
}
.left-form {
  width: 160px;
  background-color: #fff;
  margin-top: 0;
  border-right: 1px solid #eee;
  height: 100%;
  overflow-y: auto;
  ul {
    list-style: none;
    padding: 5px;
    margin: 5px;
    li {
      padding: 0px 20px;
      font-size: 15px;
      cursor: pointer;
      transition: background-color 0.2s;
      white-space: nowrap;
      &:hover {
        background-color: #f5f5f5;
      }
      &.active {
        background: #1890ff;
        color: #fff;
        font-weight: 500;
      }
    }
  }
}
.table-container {
  flex: 1;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto !important;
}

.table-area {
  width: 100%;
  margin: 0;
  box-shadow: 0 0 5px 0 #ddd;
  background-color: #fff;
  padding: 5px 5px;
  box-sizing: border-box;
  border-left: 1px solid #eee;
  margin-left: -1px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.table-area-table {
  width: 100%;
  box-sizing: border-box;
  flex: 1;
  font-size: 14px !important; 
  td, th {
    font-size: inherit;
    padding: 2px 4px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; 
  }
  td {
    padding: 2px 4px !important;
  }
  th {
    padding: 6px 8px !important; 
  }
  table {
    width: 100% !important;
    min-width: auto !important;
  }
  .el-table__column {
    padding: 0 8px;
  }
  
  // :deep(.el-table__cell:nth-child(1))  {
  //   width: 180px !important;
  //   min-width: 180px !important;
  //   max-width: 180px !important;
  //   padding: 0 8px !important;
  //   box-sizing: border-box !important;
  // }
  // :deep(.el-table__cell:nth-child(2))  {
  //   width: 80px !important;
  //   min-width: 80px !important;
  //   max-width: 80px !important;
  // }
  // :deep(.el-table__cell:nth-child(3))  {
  //   width: 100px !important;
  //   min-width: 100px !important;
  //   max-width: 100px !important;
  // }
  // :deep(.el-table__cell:nth-child(4))  {
  //   width: 80px !important;
  //   min-width: 80px !important;
  //   max-width: 80px !important;
  // }
  // :deep(.el-table__cell:nth-child(5))  {
  //   width: 90px !important;
  //   min-width: 90px !important;
  //   max-width: 90px !important;
  // }
  // :deep(.el-table__cell:nth-child(6))  {
  //   width: 90px !important;
  //   min-width: 90px !important;
  //   max-width: 90px !important;
  // }
  // :deep(.el-table__cell:nth-child(7))  {
  //   width: 120px !important;
  //   min-width: 120px !important;
  //   max-width: 120px !important;
  // }
}

.table-pagination {
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.top-filter-form, .top-filter-operate {
  width: 400px;
  background-color: #fff;
}
</style>